<template>
  <div>
    <input type="text" id="keyword" v-model="serchMap" />
    <div id="container" style="width: 800px; height: 400px"></div>
    <!-- <div id="panel"></div> -->
  </div>
</template>

<script>
window._AMapSecurityConfig = {
  securityJsCode: "f7788c1247236e92c1564ce6d3eee0d6",
};
export default {
  data() {
    return {
      map: null,
      serchMap: "",
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const that = this;
      this.map = new AMap.Map("container", {
        resizeEnable: false, // 是否可调整大小
      });
      AMap.plugin(["AMap.Geolocation"], function () {
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          position: "RB", //定位按钮的停靠位置
          offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });
        that.map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            alert("成功");
          } else {
            alert("失败");
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}

#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 280px;
}
</style>
